<template>
	<!-- 首页 -->
	<view class="home">
		<view class="header">
			<!-- 用户信息 -->
			<view class="user_info">
				<view class="logo flex-c"><image :src="share_avatar" mode=""></image></view>
				<view class="desc flex-col-ac">
					<text v-if="shopname">欢迎加入{{shopname}}</text>
					<text class="advtext" v-if="advtext">店铺公告：{{advtext}}</text>
				</view>
				<view class="share flex-c">
					<image src="/static/index/call.png" @click="fnCall()"></image>
					<image src="/static/index/wechat.png" @click="fnToWechat()"></image>
					<view class="flex-row-ac" @click="fnOpenShare()">
						<image src="/static/index/share.png"></image>
						<text>店铺分享</text>
					</view>
				</view>
			</view>
			<view class="holder"></view>
			<!-- 广告 -->
			<view class="advBox flex-row-ac">
				<view class="border flex-c">
					<image src="/static/index/prosperity.png"></image>
				</view>
				<view class="flex-col vertical-box">
					<view class="vertical" v-if="hit_list.length">
						<swiper :autoplay="true" :interval="3000" :duration="1000" :circular="true" :vertical="true">
							<swiper-item v-for="(item,index) in hit_list" :key="index">
								<view class="goodnews flex">恭喜{{item.username}}
								<text v-if="item.bet_type == 1">竞足</text>命中{{item.value}}元
								</view>
							</swiper-item>
						</swiper>
					</view>
					<text v-if="top_words">{{top_words}}</text>
				</view>
			</view>
			<!-- 分类购买彩票通道 -->
			<view class="enter flex-ac">
				<view class="flex-col-ac" v-for="(item,index) in enterList" :key="index" @click="fnOpenPage(item.url)">
					<image :src="item.src" class="pic"></image>
					<text>{{item.title}}</text>
				</view>
			</view>
			<!-- banner -->
			<view class="banner" v-if="swiperList.length">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
					<swiper-item v-for="(item,index) in swiperList" :key="index" @click="fnToBannerArticle(item.banner_id)">
						<image :src="item.image"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="categoryShop">
				<!-- 彩票分类 -->
				<view class="category" v-if="categoryList.length">
					<view class="flex-col-ac fl" v-for="(item,index) in categoryList" :key="index" @click="fnToCaipiaoDetail(item.bet_type)">
						<image :src="item.thumb"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
				<!-- 实体店铺 -->
				<view class="realshop" v-if="foot_words">
					<view>
						<view class="flex-c">
							<image src="/static/index/shop.png"></image>
							<text>实体店铺</text>
						</view>
					</view>
					<text class="text">{{foot_words}}</text>
				</view>
			</view>

			<!-- 新手入门引导 -->
			<view class="leader" @click="fnToStrategy()" v-if="leadimg">
				<image :src="leadimg"></image>
			</view>
			<!-- #ifdef H5 -->
			<view class="footholder"></view>
			<!-- #endif -->
		</view>
		<uni-popup ref="popupCall" type="dialog">
			<uni-popup-dialog :content="phoneNumber" :title="flag2"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popupWechat" type="dialog">
			<uni-popup-dialog :content="wechat" :title="flag"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popup" type="share" :mask-click="false">
			<uni-popup-share @select="select"></uni-popup-share>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup-dialog/uni-popup-dialog.vue'
	import uniPopupShare from '@/components/uni-popup-share/uni-popup-share.vue'
	export default {
		components: {
			uniPopupDialog,
			uniPopupShare,
			uniPopup
		},
		data() {
			return {
				shopname: '',
				advtext: '店主还未填写',
				hit_list: [],
				top_words: '到店取票请与我确认营业时间，进店请佩戴口罩',
				enterList: [{
						title: '跟单大厅',
						src: '/static/index/documentary.png',
						url: '/pages/documentary/documentary'
					},
					{
						title: '赛事直播',
						src: '/static/index/live-events.png',
						url: '/pages/event-live/event-live'
					},
					{
						title: '合买大厅',
						src: '/static/index/chipped-hall.png',
						url: '/pages/cooperation/cooperation'
					}
				],
				swiperList: [],
				categoryList: [],
				foot_words: '',
				leadimg: '',
				phoneNumber: '',
				wechat: '',
				select: '',
				flag: '1', //是否有微信号 2无 1有
				flag2: '3' ,//是否有手机号 4无 3有,
				share_avatar:'',
				body_foot_field:''
			}
		},
		onLoad() {
			 this.fnGetIndexData()
		},
		methods: {
			fnToBannerArticle(banner_id){
				uni.navigateTo({
					url: `/pages/packageB/bannerArticle/bannerArticle?field=${banner_id}`
				})
				
			},
			fnToStrategy(){
				uni.navigateTo({
					url: `/pages/strategy/strategy?field=${this.body_foot_field}`
				})
			},
			fnCall() {
				this.$refs.popupCall.open()
			},
			fnToWechat() {
				this.$refs.popupWechat.open()
			},
			fnOpenShare() {
				// this.$refs.popup.open()
				// wx.hideTabBar();
			},
			fnOpenPage(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			},
			fnToCaipiaoDetail(bet_type) {
				console.log(bet_type)
				uni.navigateTo({
					url: `/pages/caipiaoDetail/caipiaoDetail?type_id=${bet_type}`
				})
			},
			fnGetIndexData(){
				uni.showToast({
					title:'加载中',
					icon:'loading'
				})
				this.request({
					url: '/czb/user_index/getHomeInfo',
					method: 'POST',
					data: {
						'store_id': 1
					},
				}).then((ret) => {
					console.log("数据"+ret);
					if (ret.code == 0) {
						uni.hideToast()
						var data = ret.data
						this.shopname = data.store_info.nickname
						this.phoneNumber = data.store_info.mobile
						if(this.phoneNumber){
							this.flag2 = '3'
						}else{
							this.flag2 = '4'
						}
						uni.setStorageSync('mobile', this.phoneNumber);
						if(this.wechat){
							this.wechat = data.store_info.store_wx
							this.flag = '1'
						}else{
							this.flag = '2'
							this.wechat = '店主未填写微信号'
						}
						this.share_avatar = data.store_info.share_avatar
						this.categoryList = data.bet_type_data
						this.foot_words = data.foot_words
						this.top_words = data.top_words
						this.hit_list = data.hit_list
						this.leadimg = data.body_foot_image
						this.swiperList = data.banner
						this.body_foot_field = data.body_foot_field
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.header {
		height: 356rpx;
		width: 100%;
		background: url(../../static/index/bg.png)no-repeat center/100%;

		.user_info {
			width: 710rpx;
			height: 300rpx;
			background: $uni-bg-color;
			box-shadow: 0px 15rpx 20rpx 0px rgba(0, 0, 0, 0.02);
			border-radius: $uni-border-radius-lg;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 196rpx;

			.logo {
				width: 132rpx;
				height: 132rpx;
				background: linear-gradient(0deg, #FE5E60, #F13043);
				border: 8rpx solid #FFFFFF;
				border-radius: $uni-border-radius-circle;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: -66rpx;
				image{
					height: 100%;
					width: 100%;
					border-radius: 50%;
				}
			}

			.desc {
				color: $uni-text-color;
				font-size: $uni-font-size-lg;
				margin-top: 84rpx;

				.advtext {
					color: $uni-text-color-grey;
					font-size: 26rpx;
					margin: 16rpx 0 20rpx;
				}
			}

			.share {
				image {
					width: $uni-img-size-lg;
					height: $uni-img-size-lg;
					margin: 0 20rpx;
				}

				view {
					padding: 0 20rpx;
					margin: 0 20rpx;
					width: 214rpx;
					height: 76rpx;
					background: linear-gradient(180deg, #FEA52F, #FF7F20);
					border-radius: 38rpx;
					font-size: $uni-font-size-lg;
					color: $uni-text-color-inverse;

					image {
						width: $uni-img-size-sm;
						height: $uni-img-size-sm;
						display: block;
					}

				}
			}
		}

		.holder {
			height: 496rpx;
		}

		.advBox {
			width: 710rpx;
			height: 104rpx;
			background: $uni-bg-color;
			box-shadow: 0px 15rpx 20rpx 0px rgba(0, 0, 0, 0.02);
			border-radius: $uni-border-radius-lg;
			margin: 20rpx;
			padding: 0 20rpx;
			box-sizing: border-box;

			.border {
				border-right: 1rpx solid #eee;

				image {
					width: 90rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
			}

			.vertical-box {
				padding-left: 30rpx;
				font-size: 22rpx;
				color: #666;

				.vertical {
					max-height: 40rpx;
					overflow: hidden;

					swiper {
						max-height: 40rpx;

						swiper-item {
							height: 100%;

							.goodnews {
								color: $uni-main-color;
								align-items: center;
							}
						}
					}
				}

			}
		}

		.enter {
			width: 710rpx;
			height: 198rpx;
			background: $uni-bg-color;
			box-shadow: 0px 15rpx 20rpx 0px rgba(0, 0, 0, 0.02);
			border-radius: $uni-border-radius-lg;
			margin: 20rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			color: $uni-text-color;
			font-size: 26rpx;

			.pic {
				width: 110rpx;
				height: 110rpx;
				margin-bottom: 10rpx;
			}
		}

		.banner {
			width: 710rpx;
			height: 180rpx;
			border-radius: $uni-border-radius-lg;
			margin: 20rpx;
			background: $uni-bg-color;

			swiper,
			swiper-item,
			image {
				height: 100%;
				width: 100%;
				border-radius: 20rpx;
			}
		}
		.categoryShop{
			box-shadow: 0px 15rpx 20rpx 0px rgba(0, 0, 0, 0.02);
			border-radius: 20rpx;
			background: $uni-bg-color;
			width: 710rpx;
			margin: 0 auto 20rpx;
			.category {
				padding-bottom: 40rpx;
				margin: 20rpx;
				overflow: hidden;
				color: $uni-text-color;
				font-size: 26rpx;
			
				view {
					width: 33.333%;
					margin-top: 40rpx;
			
					image {
						width: 100rpx;
						height: 100rpx;
						margin-bottom: 10rpx;
						display: block;
					}
				}
			
			}
			
			.realshop {
				padding: 0 53rpx 20rpx;
				font-size: 24rpx;
				color: #A3A3A3;
			
				view {
					width: 100%;
					height: 1px;
					border-bottom: 1px dashed #FF8A6E;
					box-sizing: border-box;
					position: relative;
					padding: 26rpx 0;
			
					view {
						position: absolute;
						width: 168rpx;
						height: 52rpx;
						background: linear-gradient(0deg, #FC523E, #FF8B6F);
						box-shadow: 0px 0px 16rpx 0px rgba(0, 0, 0, 0.1);
						border-radius: 26rpx;
						top: 50%;
						left: 50%;
						transform: translateX(-50%);
						font-size: 26rpx;
						color: $uni-text-color-inverse;
			
						image {
							width: 26rpx;
							height: 26rpx;
							margin-right: 10rpx;
						}
			
					}
				}
			
				.text {
					padding: 50rpx 0 0 0;
					display: block;
				}
			}
		}
		

		.leader {
			image {
				height: 298rpx;
				display: block;
				width: 100%;
			}
		}

		/*  #ifdef  H5  */
		.footholder {
			width: 100%;
			height: var(--window-bottom);
		}

		/*  #endif  */
	}
</style>
